<!--
* @description 巡检
* @author zywu
* @date 2021/03/12 16:31:54
!-->
<template>
  <div class="inspect-main">
    <van-nav-bar title="日常巡检" fixed left-arrow @click-left="onClickLeft" @click-right="onClickRight">
      <template #right>
        <img v-if="!isOffline" src="../../assets/img/inspect/point_entrance.png" alt style="width:22px;" />
      </template>
    </van-nav-bar>/>
    <van-tabs class="inspect-main__tabs inspect-main-title" v-model="inspectActive" color="#2471CA"
      title-active-color="#2471CA" title-inactive-color="#666666">
      <van-tab v-for="(item, index) in listTitle" :key="index" :title="item.name">
        <inspect-list v-if="showList && (item.index == 0 || item.index == 1)" ref="inspectList" :status="item.index"
          :is-active="inspectActive == item.index" @getLittleNum="getLittleNum" />
        <inspect-statistic :default-tab="defaultStatTab" :default-capsule="defaultCapsule" v-if="item.index == 2" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import inspectList from './InspectList'
import inspectStatistic from './InspectStatistic'
import { getTaskCount } from '@/api/inspect'
import { getDataByKey } from '@/utils/util'
export default {
  name: 'InspectMain',
  data() {
    return {
      listTitle: [
        { name: '', index: 0 },
        { name: '', index: 1 },
        { name: '全部', index: 2 },
      ],
      inspectActive: 0,
      qRcode: '',
      defaultStatTab: 0,
      defaultCapsule: 1,
      showList: true,
    }
  },

  components: {
    inspectList,
    inspectStatistic,
  },

  watch: {},

  computed: {
    ...mapState(['userInfo', 'isRenovate', 'isOffline']),
  },

  created() {
    if (window.location.href.indexOf('http://') < 0) {
      // 离线巡检
      this.$store.commit(
        'setUserInfo',
        JSON.parse(getDataByKey('LOCAL_USERINFO'))
      )
      this.$store.commit('setQiniuPath', getDataByKey('QINIUPATH'))
      this.$store.commit('setPlatformCode', getDataByKey('platformCode'))
      this.$store.commit(
        'setIsOffline',
        getDataByKey('IS_OFFLINE_MODULE') == 1 ? true : false
      )
      this.$store.commit('setAppKeyObj', JSON.parse(getDataByKey('appKeyObj')))
      this.$store.commit(
        'setUnitRecords',
        JSON.parse(getDataByKey('unit_search_records') || '{}')
      )
      window.uploadOnNginx = getDataByKey('uploadOnNginx') == 'true' ? true : false
    }
    if (this.isOffline) {
      this.listTitle = [{ name: '', index: 1 }]
    }
    let { qRcode, tabId, refresh } = this.$route.query
    this.qRcode = qRcode
    this.inspectActive = parseInt(tabId || 0)
    // 跳转到全部标签页，需要主动请求任务统计数字
    if (this.inspectActive == 2) {
      this.defaultStatTab = 1
      this.defaultCapsule = 2
      this.getTaskCount()
    }

    window.setInspectTab = this.setInspectTab
  },

  mounted() { },
  activated() {
    if (this.$route.query.refresh === 1) {
      this.setInspectTab(0)
    }
  },

  methods: {
    setInspectTab(val) {
      this.inspectActive = val
      if (this.$refs.inspectList) {
        this.$refs.inspectList.forEach((n) => {
          n.onLoad()
        })
      }
    },
    getTaskCount() {
      getTaskCount({
        account: this.userInfo.accountName,
      }).then((res) => {
        this.getLittleNum(res.data)
      })
    },
    getLittleNum(item) {
      if (this.isOffline) {
        if (item) {
          this.listTitle[0].name = '执行中 ' + item.execution
        } else {
          this.listTitle[0].name = '执行中 ' + 0
        }
      } else {
        if (item) {
          this.listTitle[0].name = '待领取 ' + item.noreceive
          this.listTitle[1].name = '执行中 ' + item.execution
        } else {
          this.listTitle[0].name = '待领取 ' + 0
          this.listTitle[1].name = '执行中 ' + 0
        }
      }
    },
    onClickLeft() {
      if (this.isOffline) {
        let url =
          location.href.indexOf('http://') > -1
            ? location.href.replace(
              'ilink-zhxf-h5/',
              'ilink-zhxf-h5/logout.html'
            )
            : location.href.replace('index.html', 'logout.html')
        window.open(url, '_self')
      } else {
        window.top.app.methods.backToTab()
      }
    },
    onClickRight() {
      this.$router.push({ name: 'InspectAllPoint' })
    },
  },
}
</script>
<style lang='scss'>
.inspect-main {
  .van-tab {
    font-size: 16px;
  }

  &__tabs {
    >.van-tab--active {
      font-size: 16px;
      font-weight: bold;
      color: #2471ca;
    }

    >.van-tabs__wrap {
      position: fixed;
      width: 100%;
      z-index: 10;
      padding-top: 10px;
      background: #fff;
      top: 46px;
    }

    >.van-tabs__content {
      margin-top: 110px;
    }
  }
}
</style>